<template>
  <div class="maintain_box">
    <!--     设备名称-->
    <!--    <div class="maintain_device">-->
    <!--      <span class="title">设备名称：</span><span class="title_content">WJ1092焊联工业</span>-->
    <!--    </div>-->
    <div class="maintain_process">
      <!--     剩余时间-->
      <div class="header_box">
        <div class="process_header">
          <span class="title">设备名称:</span><span>WJ1092焊联工业</span>
        </div>
        <div class="process_header">
          <span class="title">剩余</span><span>400h</span>
        </div>
      </div>
      <!--     进度条-->
      <div class="process_content">
        <process_component :status="status"/>
      </div>
      <div class="process_scale">
        <span>0h</span>
        <span>100h</span>
        <span>200h</span>
        <span>300h</span>
        <span>400h</span>
        <span>500h</span>
      </div>
    </div>
  </div>
</template>

<script>
import process_component from "@/components/echart_components/process_component";

export default {
  name: "MaintenanceCountdown",
  props: {},
  components: {
    process_component
  },
  data() {
    return {
      status: 1
    }
  }
}
</script>

<style scoped lang="scss">
.maintain_box {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  justify-content: flex-start;
  padding: 0.1rem;

  .maintain_device {
    display: flex;
    justify-content: flex-start;

    .title {
      color: #c0edff;
    }

    .title_content {
      color: white;
    }


  }

  .maintain_process {
    background-color: #c0edff;
    display: flex;
    height: 4rem;
    //justify-content: flex-start;
    width: 100%;
    padding: 5px;
    flex-direction: column;
    margin-top: 5px;
    padding: 5px;
    //margin: 10px;
    .header_box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .process_header {
        display: flex;
        height: 1.5rem;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        font-size: 0.8rem;
        color: #0293cd;

        .title {

          font-weight: bolder;
        }
      }
    }


    .process_content {
      width: 100%;
      height: 16px;
    }

    .process_scale {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 0.5rem;
    }
  }
}
</style>
